<template>
    <div class="homebanner">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) of bannerList" :key="index">
                <img :src="item.pic">
            </swiper-slide>
            <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
    data() {
        return {
            bannerList:[
                {
                    pic:require('../assets/img/banner/banner.jpg')
                },
                {
                    pic:require('../assets/img/banner/banner.jpg')
                },
                {
                    pic:require('../assets/img/banner/banner.jpg')
                },
                {
                    pic:require('../assets/img/banner/banner.jpg')
                }
            ],
            swiperOption: {
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                    renderBullet(index, className) {
                        return `<span class="${className} swiper-pagination-bullet-custom"></span>`;
                    }
                }
            }
        };
    },
    components: {
        swiper,
        swiperSlide
    }
};
</script>

<style lang="less" scoped>
.homebanner {
}
</style>
<style lang="less">
.swiper-pagination-bullet-custom {
    display:inline-block;
    width: 18px;
    height: 18px;
    border-radius:50%;
    background:rgba(191,191,191,1);
}
.swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
    display:inline-block;
    width: 54px;
    height: 18px;
    border-radius:9px;
    background:rgba(255,255,255,1);
}
</style>